<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Image Compression</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
</head>
<body>
  <div>
    <label for="widthInput">宽度：</label>
    <input type="number" id="widthInput" min="1" value="460">
  </div>
  <div>
    <label for="heightInput">高度：</label>
    <input type="number" id="heightInput" min="1" value="640">
  </div>
  <div>
    <label for="qualityInput">压缩质量：</label>
    <input type="range" id="qualityInput" min="0" max="1" step="0.1" value="0.9">
    <output id="qualityValue">0.9</output>
  </div>
  <input type="file" id="imageInput" accept="image/*" multiple>
  <button onclick="compressAndDownload()">压缩并下载</button>

  <script>
    function compressAndDownload() {
		var imageInput = document.getElementById('imageInput');
		var files = imageInput.files;
		if (files.length > 0) {
			var zip = new JSZip();
			var count = 0;

			var widthInput = document.getElementById('widthInput');
			var heightInput = document.getElementById('heightInput');
			var qualityInput = document.getElementById('qualityInput');

			function addToZip(file, dataUrl) {
				zip.file(file.name, dataUrl.split(',')[1], { base64: true });
				count++;

				if (count === files.length) {
					zip.generateAsync({ type: 'blob' }).then(function(content) {
						var link = document.createElement('a');
						link.href = URL.createObjectURL(content);
						link.download = 'compressed_images.zip';
						link.click();
					});
				}
			}

			for (var i = 0; i < files.length; i++) {
				compressAndSaveFile(files[i], addToZip);
			}
		}
	}

	function compressAndSaveFile(file, callback) {
		var reader = new FileReader();
		reader.onload = function(event) {
			var img = new Image();
			img.onload = function() {
				var canvas = document.createElement('canvas');
				var ctx = canvas.getContext('2d');

				var widthInput = document.getElementById('widthInput');
				var heightInput = document.getElementById('heightInput');

				var width = parseInt(widthInput.value);
				var height = parseInt(heightInput.value);

				canvas.width = width;
				canvas.height = height;
				ctx.drawImage(img, 0, 0, width, height);

				var qualityInput = document.getElementById('qualityInput');
				var quality = parseFloat(qualityInput.value);

				var compressedDataUrl = canvas.toDataURL('image/jpeg', quality);
				callback(file, compressedDataUrl);
			};
			img.src = event.target.result;
		};
		reader.readAsDataURL(file);
	}

	var qualityInput = document.getElementById('qualityInput');
	var qualityValue = document.getElementById('qualityValue');
	qualityInput.addEventListener('input', function() {
		qualityValue.textContent = qualityInput.value;
	});
  </script>
</body>
</html>
